<template>
	<view class="container" style="width: 100%;height:100%;">
		<swiper
		style="width: 100%;height:100% ;"
		 :indicator-dots="true" 
		 :autoplay="1" 
		 :interval="3000" 
		 :duration="1000"
		 current="2"
		 :vertical="0"
		 @change="test"
		 >
			<swiper-item v-for="item,index in list">
				<view class="swiper-item" 
				style="width: 100%;height:100% ;">
					<image mode="scaleToFill" 
					style="width: 100%;height: 100%;"  
					:src="item.icon"
					></image>
				</view>
			</swiper-item>
		
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						icon:"../../static/food/1.png"
					},
					{
						icon:"../../static/food/2.png"
					},
					{
						icon:"../../static/food/3.png"
					},
					{
						icon:"../../static/food/4.png"
					},
				]
				
			}
		},
		methods: {
			test(e){
				// console.log(e);
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}

</style>
